window.addEventListener("load", () => {
    const script = document.createElement("SCRIPT");
    script.src = './js/home/home.js';
    script.setAttribute("type", "module");
    document.querySelector("body").appendChild(script);
});

// 导入对应的页面初始化函数
import { homePage } from "./home/home.js";//首页渲染的函数
import { recommendListPage } from "./recommendList/recommendList.js";//推荐页面渲染的函数
import { playerPage } from "./player/player.js";//播放页面渲染的函数
import { reactive } from "./util/reactive.js";
// 导入hash信息提取函数
import { getRouterOptions } from "./util/util.js";


// 路由表
const routers = [
    {
        name: "home",
        path: "/home",
        component: homePage,
    },
    {
        name:"recommendList",
        path:"/recommendList",
        component:recommendListPage,
    },
    {
        name:"player",
        path:"/player",
        component:playerPage,
    }
]

// 路由表需要从./home/home.js 和./recommendList/recommendList.js 中导入对应的页面初始化函数



// 数据响应式执行函数
let effective=()=>changeComponent();
// 数据响应式处理
export const hashProxy=reactive(
    {
        hash:"",
    },
    effective
);


let hash;

function changeComponent(){
    let options=getRouterOptions(hash);
    const [{component}]=routers.filter(//filter返回一个新数组，不改变原数组
        (router)=>router.name==options.name//如果两个name匹配到了，就激昂router中的component属性赋值给component变量
    );
    // component此时是homePage或者recommendListPage中的一个函数
    component(options);//调用一个已存储在component变量中的函数，并将options作为参数传入
    // document.querySelector("#header-title").innerHTML=name;
    
}

// 监听页面load和hashchange事件，事件触发后对代理对象赋值
window.addEventListener("load", () => {
    hash=window.location.hash;
    changeComponent();
})
window.addEventListener("hashchange", () => {
    hash=window.location.hash;
    changeComponent();
})


import { initPlayerControl,initPlayerEvent } from "./home/control.js";

window.addEventListener("load", () => {
    hashProxy.hash=window.location.hash;
    initControl();
})
function initControl(){
    initPlayerControl();
    initPlayerEvent();
}


